<template>
  <div class="header">
    <div class="header-content">
      <h1>{{ title }}</h1>
    </div>
    <div class="header-controls">
      <div class="time">{{ currentTime }}</div>
      <button class="fullscreen-button" @click="handleFullscreen" title="全屏显示">
        <svg
          class="fullscreen-icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path
            d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
          />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { formatCurrentTime, startTimer, stopTimer } from '@/utils/timeUtils'
import { toggleFullscreen, setupFullscreenListeners } from '@/utils/fullscreenUtils'

interface Props {
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: '广东省数据监控大屏'
})

const currentTime = ref('')
let timer: number

const updateTime = () => {
  currentTime.value = formatCurrentTime()
}

const handleFullscreen = () => {
  toggleFullscreen()
}

onMounted(() => {
  updateTime()
  timer = startTimer(updateTime)
  setupFullscreenListeners()
})

onUnmounted(() => {
  stopTimer(timer)
})
</script>

<style scoped>
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(10, 25, 41, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 30px;
}

.header h1 {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(90deg, #4a90e2, #5cb85c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-controls {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}

.time {
  font-size: 16px;
  color: #4a90e2;
  font-weight: 500;
  white-space: nowrap;
}

.fullscreen-button {
  background: rgba(74, 144, 226, 0.8);
  color: white;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.fullscreen-button:hover {
  background: rgba(74, 144, 226, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}

.fullscreen-icon {
  width: 20px;
  height: 20px;
}

/* 全屏提示样式 */
:global(.fullscreen-message) {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 25, 41, 0.9);
  color: #4a90e2;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1px solid rgba(74, 144, 226, 0.5);
  font-size: 14px;
  z-index: 10000;
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}
</style>